import React from 'react';
import './ColorPicker.css';

export default class ColorPicker extends React.Component{

    state = {
        r: 0,
        g: 0,
        b: 0
    }

    render(){
        //获取三个状态属性
        let {r,g,b} = this.state;

        return <div className="color-container">
            <div className="color-show" style={{backgroundColor: `rgb(${r},${g},${b})`}} ></div>
            <div className="color-control">
                R: <input type="range" min="0" max="255" value={r} name="r"  onChange={this.change}   /> <br />
                G: <input type="range" min="0" max="255" value={g} name="g"  onChange={this.change}  /> <br />
                B: <input type="range" min="0" max="255" value={b} name="b"  onChange={this.change}  /> <br />
            </div>
        </div>
    }

    change = (e) => {
        let key = e.target.name;
        this.setState({
            [key] : e.target.value
        })
    }
}